<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      margin: 0;
      padding: 0;
      color: #cdcdcd;
      font-family: "Avenir Next", "Avenir", sans-serif;
    }

    #menuToggle a {
      text-decoration: none;
      color: #232323;
      transition: color 0.3s ease;
    }

    #menuToggle a:hover {
      color: tomato;
    }

    #menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
      -webkit-touch-callout: none;
    }
    #menuToggle span{
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #cdcdcd;
      border-radius: 3px;
      z-index: 1;
      transform-origin: 4px 0px;
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }
  </style>
  <body>
    <nav role="navigation">
      <div id="menuToggle">
        <!--
          A fake / hidden checkbox is used as click reciever,
          so you can use the :checked selector on it.
        -->
        <input type="checkbox" />

        <!--
          Some spans to act as a hamburger.
          They are acting like a real hamburger,
          not that McDonalds stuff.
        -->
        <span></span>
        <span></span>
        <span></span>

        <!--
        Too bad the menu has to be inside of the button
        but hey, it's pure CSS magic.
        -->
        <ul id="menu">
          <a href="#"><li>Home</li></a>
          <a href="#"><li>About</li></a>
          <a href="#"><li>Info</li></a>
          <a href="#"><li>Contact</li></a>
          <a href="https://erikterwan.com/" target="_blank"
            ><li>Show me more</li></a
          >
        </ul>
      </div>
      
    </nav>
  </body>
</html>
